<template>
  <div class="public">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="formModel.title"
          name="标题"
          label="标题"
          placeholder="标题"
          :rules="[{ required: true, message: '请填写标题' }]"
        />
        <van-field
          v-model="formModel.author"
          type=""
          name="作者"
          label="作者"
          placeholder="作者"
          :rules="[{ required: true, message: '请填写作者' }]"
        />
        <van-field
          v-model="formModel.location"
          type=""
          name="地点"
          label="地点"
          placeholder="地点"
          :rules="[{ required: true, message: '请填写地点' }]"
        />
      </van-cell-group>
    </van-form>

    <div class="top">
      <span style="font-size: 16px" class="iconfont icon-fanhui"></span>
      <van-button
        size="small"
        style="width: 80px; height: 35px"
        type="primary"
        @click="onSubmit"
      >
        发表
      </van-button>
    </div>
    <div>
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="formModel.content"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <!-- <div style="margin: 0">
      <van-button type="primary" @click="onSubmit"> 发表 </van-button>
    </div> -->
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, toRaw } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
import { showNotify } from 'vant'

import { showToast } from 'vant'
const formModel = ref({
  title: '',
  author: '',
  content: '',
  location: ''
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML

// 模拟 ajax 异步获取内容

const toolbarConfig = {}
const editorConfig = { placeholder: '这一刻的想法...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value

  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  editorRef.value.blur() // 编辑器失焦
}

//获取数据
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

//提交数据，添加文章

const onSubmit = () => {
  console.log(formModel)
  if (
    !formModel.value.title ||
    !formModel.value.author ||
    !formModel.value.content ||
    !formModel.value.location
  ) {
    // showNotify({ message: '请填写完整信息' })
    showToast('请填写完整信息')
    return
  }
  axios
    .post('http://localhost:3000/api/add', toRaw(formModel.value))
    .then((res) => {
      console.log(res)

      showToast('发布成功')
      //发布成功，重新获取数据
      userStore.getInfo()
    })
    .catch((err) => {
      console.log(err)
      showToast('发布失败')
    })
}
</script>
<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.public {
  padding: 0.5rem;
  margin-bottom: 50px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  background-color: #f2f2f2;
}
table td {
  width: 100px;
  border: 3px solid skyblue;
}
input {
  width: 100px;
  height: auto;
  border: 0;
}
</style>
